import { StyleSheet, Text, View, Modal, TouchableOpacity, ScrollView } from 'react-native';
import React from 'react';
import FastImage from '@d11/react-native-fast-image';
import { useTranslation } from 'react-i18next';
import { observer, userStore, appStore } from '~/store';
import { px2dp, scale, width } from '~/utils/px2dp';
import Icon from 'react-native-vector-icons/Ionicons';
import { useNavigation } from '@react-navigation/native';

interface Props {
    visible: boolean;
    titleId?: string | number;
    onToggleVisible: Function;
    callBack: Function;
}

export default observer((props: Props) => {
    const { t } = useTranslation();
    const navigation: any = useNavigation();
    const { visible, onToggleVisible, callBack, titleId } = props;
    const { userDeviceYY01Data } = userStore;
    return (
        <Modal transparent={true} visible={visible} statusBarTranslucent={true} hardwareAccelerated={true}>
            <View style={styles.modalOverlay}>
                <View style={[styles.modalContent]}>
                    <View style={[styles.row, styles.between, { marginBottom: px2dp(32) }]}>
                        <TouchableOpacity
                            onPress={() => {
                                onToggleVisible && onToggleVisible();
                            }}>
                            <Icon name={'close-sharp'} size={px2dp(40)} color={'#666666'}></Icon>
                        </TouchableOpacity>
                        <Text style={styles.title}>{t('AddDeviceScreen.t56')}</Text>
                        <TouchableOpacity
                            onPress={() => {
                                navigation.navigate('SearchBleDevice', { titleId });
                                onToggleVisible && onToggleVisible();
                            }}>
                            <Icon name={'add-circle'} size={px2dp(40)} color={'#000'}></Icon>
                        </TouchableOpacity>
                    </View>
                    <ScrollView
                        showsVerticalScrollIndicator={false}
                        contentContainerStyle={styles.contentContainerStyle}>
                        {userDeviceYY01Data.map((item, index) => {
                            return (
                                <View key={parseInt(item.device_id)} style={[styles.listItem, styles.row]}>
                                    <View style={[styles.row]}>
                                        <FastImage
                                            style={styles.avatar}
                                            source={{
                                                uri: 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/02/db52f202502221533365635.png',
                                                priority: FastImage.priority.high,
                                            }}
                                            resizeMode={FastImage.resizeMode.contain}
                                        />
                                        <View style={{ marginLeft: px2dp(12) }}>
                                            <Text style={styles.card_name}>
                                                {appStore.app.language == 'zh'
                                                    ? item.num + t('Acupoints.t63')
                                                    : t('Acupoints.t63') + item.num}
                                            </Text>
                                            <Text style={styles.device_sn}>{item.device_sn}</Text>
                                        </View>
                                    </View>
                                    <TouchableOpacity
                                        style={styles.bindBt}
                                        onPress={() => {
                                            callBack && callBack(item);
                                            onToggleVisible && onToggleVisible();
                                        }}>
                                        <Text style={styles.bt_text}>{t('AddDeviceScreen.t56')}</Text>
                                    </TouchableOpacity>
                                </View>
                            );
                        })}
                    </ScrollView>
                </View>
            </View>
        </Modal>
    );
});

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    between: {
        justifyContent: 'space-between',
    },
    modalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
    },
    modalContent: {
        backgroundColor: '#fff',
        padding: px2dp(24),
        borderRadius: px2dp(48),
        width: width,
        height: '60%',
    },
    title: {
        color: '#000',
        fontSize: scale(28),
        fontWeight: '500',
    },
    contentContainerStyle: {
        flexGrow: 1,
        paddingBottom: '20%',
    },
    listItem: {
        borderBottomWidth: 1,
        borderColor: '#e5e5e5',
        marginBottom: px2dp(32),
        paddingBottom: px2dp(24),
        justifyContent: 'space-between',
    },
    card_name: {
        color: '#1A1A1A',
        fontSize: scale(24),
        fontWeight: 'bold',
        marginBottom: px2dp(30),
    },
    avatar: {
        width: px2dp(120),
        height: px2dp(120),
    },
    device_sn: {
        color: '#1A1A1A',
        fontSize: scale(24),
    },
    bindBt: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#25C8C8',
        height: px2dp(60),
        marginTop: px2dp(32),
        borderRadius: px2dp(40),
        width: px2dp(160),
    },
    bt_text: {
        color: '#fff',
        fontSize: scale(28),
    },
});
